<template>
    <div class="main">
      <div class="bg bg-blur"></div>
      <div class="content content-front">
        <div class="left">
          <img :src="img" class="loginleftimg" alt="">
        </div>
        <div class="right">
          <Tabs value="name1" type="line" >
            <TabPane label="登录" name="name1" class="tabane">
              <Form ref="formInline" :model="formInline" :rules="ruleInline" class="loginform">
                <FormItem class="formitem title">
                  <div class="itemtitle">登录</div>
                </FormItem>
                <FormItem prop="user" class="formitem">
                  <i-input type="text" v-model="formInline.user" placeholder="用户名">
                    <Icon type="ios-person-outline" slot="prepend"></Icon>
                  </i-input>
                </FormItem>
                <Form-item prop="password" class="formitem">
                  <i-input type="password" v-model="formInline.password" placeholder="密码">
                    <Icon type="ios-lock-outline" slot="prepend"></Icon>
                  </i-input>
                </Form-item>
                <Form-item>
                    <i-button type="primary" @click="handleSubmit('formInline')">验证并登录</i-button>
                    <br>
                    <Checkbox v-model="isremeberpassword">记住密码</Checkbox>
                    <span class="remeberpassword" @click='forgetpassword()'>忘记密码</span>
                </Form-item>
              </Form>
            </TabPane>
            <TabPane label="注册" name="name2">
              <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" >
                <Form-item class="title" label="">
                  <div class="itemtitle">注册</div>
                </Form-item>
                <Form-item class="formitemre" label="账号" prop="name" :label-width="90">
                    <i-input v-model="formValidate.name" placeholder="请输入用户名"></i-input>
                </Form-item>
                <Form-item class="formitemre" label="手机号" prop="tel" :label-width="90">
                    <i-input v-model="formValidate.tel" placeholder="请输入手机号"></i-input>
                </Form-item>
                <Form-item class="formitemre" label="密码" prop="repassword" :label-width="90">
                    <i-input v-model="formValidate.repassword" type="password" placeholder="请输入密码"></i-input>
                </Form-item>
                <Form-item class="formitemre" label="确认密码" prop="srepassword" :label-width="90">
                    <i-input v-model="formValidate.srepassword" type="password" placeholder="请再次输入密码"></i-input>
                </Form-item>
                <Form-item class="formitemre" label="邮箱" prop="mail" :label-width="90">
                    <i-input v-model="formValidate.mail" placeholder="请输入邮箱"></i-input>
                </Form-item>
                <Form-item class="formitemreya" label="邮箱验证码" prop="mailverify" :label-width="90">
                  <Row>
                    <i-col span="20">
                      <Form-item>
                        <i-input v-model="formValidate.mailverify" placeholder="邮箱验证码"></i-input>
                      </Form-item>
                    </i-col>
                    <i-col span="1">
                        <i-button class="rehuoqu" type="info" v-show="show" @click="getCode">获取验证码</i-button>
                        <i-button class="rehuoqu" type="info" v-show="!show" >{{count}}</i-button>
                    </i-col>
                  </Row>
                </Form-item>
                <Form-item>
                    <i-button type="primary" class="registerconfirm" @click="handleRegister('formValidate')">提交</i-button>
                    <i-button type="ghost" class="registerreset" @click="handleReset('formValidate')" style="margin-left: 8px">重置</i-button>
                </Form-item>
              </Form>
            </TabPane>
          </Tabs>
          <Modal
              v-model="modal1"
              title="请进行滑动验证"
              :closable="false"
              :mask-closable="false"
              width="340">
              <slide-verify :l="42"
              :r="10"
              :w="310"
              :h="155"
              @success="onSuccess"
              @fail="onFail"
              @refresh="onRefresh"
              :slider-text="text"
              :imgs="imgs"></slide-verify>
              <div>{{msg}}</div>
              <div slot="footer">
              </div>
          </Modal>
          <Modal
              v-model="modal2"
              title="请进行滑动验证"
              :closable="false"
              :mask-closable="false"
              width="340">
              <slide-verify :l="42"
              :r="10"
              :w="310"
              :h="155"
              @success="onSuccessRegister"
              @fail="onFailRegister"
              @refresh="onRefreshRegister"
              :slider-text="text"
              :imgs="imgs"
              ></slide-verify>
              <div>{{msgRegister}}</div>
              <div slot="footer">
              </div>
          </Modal>
        </div>
      </div>
    </div>
</template>
<script>
import {neturl} from '../assets/js/common'
export default {
  data () {
    let validatePass2 = (rule, value, callback) => {
      if (value !== this.formValidate.repassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    // let pwdValidate = (rule, value, callback) => {
    //   this.$refs.formItem.validateField('pwdCheck')
    //   callback()
    // }
    return {
      img: '../../static/image/loginbg.png',
      msg: '',
      imgs: [
        '../../static/image/img.jpg',
        '../../static/image/img1.jpg',
        '../../static/image/img2.jpg',
        '../../static/image/img3.jpg',
        '../../static/image/img4.jpg'
      ],
      msgRegister: '',
      text: '向右滑',
      modal1: false,
      modal2: false,
      show: true,
      count: '',
      timer: null,
      formValidate: {
        name: '',
        mail: '',
        repassword: '',
        srepassword: '',
        mailverify: '',
        tel: ''
      },
      isremeberpassword: false,
      formInline: {
        user: '',
        password: ''
      },
      ruleInline: {
        user: [
          { required: true, message: '请填写用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          { type: 'string', min: 8, message: '密码长度不能小于8位', trigger: 'blur' }
        ]
      },
      ruleValidate: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '手机号不能为空', trigger: 'blur' }
        ],
        mail: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        repassword: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 8, max: 15, message: '密码长度应为8-16个字符!', trigger: 'blur' },
          { trigger: 'blur',
            validator: (rule, value, callback) => {
              var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
              // var passwordreg = /(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
              // console.log(passwordreg.test(value))
              if (!passwordreg.test(value)) {
                callback(new Error('密码需包含字母、数字、特殊符号'))
              } else {
                callback()
              }
            }
          }
        ],
        // repassword: [
        //   { required: true, validator: pwdValidate, trigger: 'blur' }
        // ],
        srepassword: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
        mailverify: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // 登录提交
          this.modal1 = true
        } else {
          this.$Message.error('验证失败!')
        }
      })
    },
    handleRegister (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // 注册提交
          this.modal2 = true
        } else {
          this.$Message.error('验证失败!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    getCode () {
      if (this.formValidate.mail === '') {
        this.$Message.error('邮箱不能为空!')
      } else {
        const TIME_COUNT = 60
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
        // 发送验证码
        let mail = this.formValidate.mail
        let upload = { data: mail }
        this.$axios.post(neturl + '/by/adms/user/verify', upload
        ).then(res => {
          this.$Message.success('验证码获取成功!')
        })
      }
    },
    onSuccess () {
      this.$Spin.show()
      this.modal1 = false
      // 登录提交表单
      let upload = { data: '{username: ' + "'" + this.formInline.user + "'" + ', password: ' + "'" + this.formInline.password + "'" + '}', loginMark: '1' }
      this.$axios.post(neturl + '/by/adms/user/login', upload
      ).then(res => {
        // this.onRefresh()
        if (res.data.code === 200) {
          // console.log(res)
          // this.$Spin.hide()
          this.$Message.success('登录成功!')
          this.$cookie.set('user', JSON.stringify(res.data.data.baseinfo), {expires: 30})
          // 如果选择记住密码 保存密码用户名
          if (this.isremeberpassword) {
            // 记住密码
            this.$cookie.set('byuserinfo', this.formInline.user + '&' + this.formInline.password, {expires: 30})
          } else {
            this.$cookie.delete('byuserinfo')
          }
          // 登录成功跳转首页
          this.$router.push('/')
        } else {
          // console.log(res)
          this.onFail()
          this.$Spin.hide()
          this.$Message.error(res.data.info)
        }
      })
    },
    onFail () {
      this.msg = '验证失败'
    },
    onRefresh () {
      this.msg = ''
    },
    onSuccessRegister () {
      this.modal2 = false
      this.$Spin.show()
      // 注册提交表单
      let upload = { data: '{username: ' + "'" + this.formValidate.name + "'" + ', password: ' + "'" + this.formValidate.repassword + "'" + ', email: ' + "'" + this.formValidate.mail + "'" + ', tel: ' + "'" + this.formValidate.tel + "'" + ', verifycode: ' + "'" + this.formValidate.mailverify + "'" + '}' }
      this.$axios.post(neturl + '/by/adms/user/register', upload
      ).then(res => {
        // console.log(res)
        // this.onRefreshRegister()
        if (res.data.code === 200) {
          // console.log(res)
          this.$Message.success('注册成功!')
          // 注册成功刷新页面
          location.reload()
        } else {
          this.onFailRegister()
          this.$Spin.hide()
          this.$Message.error(res.data.info)
        }
      })
    },
    onFailRegister () {
      this.msg = '验证失败'
    },
    onRefreshRegister () {
      this.msg = ''
    },
    forgetpassword () {
      let routeUrl = this.$router.resolve({
        path: '/forgetpassword'
      })
      window.open(routeUrl.href, '_self')
    },
    onAgain () {
      // console.log('检测到非人为操作的哦！')
      this.msg = 'try again'
      // 刷新
      this.$refs.slideblock.reset()
    },
    handleClick () {
      // 父组件直接可以调用刷新方法
      this.$refs.slideblock.reset()
    },
    ok () {
    },
    cancel () {
    }
  },
  created () {
    this.$Spin.hide()
    // 获取cookie判断是否选择记住密码
    var isre = this.$cookie.get('byuserinfo')
    if (isre != null) {
      var isrearry = isre.split('&')
      this.formInline.user = isrearry[0]
      this.formInline.password = isrearry[1]
      this.isremeberpassword = true
    }
  }
}
</script>

<style>
.ivu-tabs-nav{
  width:100%
}
.ivu-tabs-nav .ivu-tabs-tab{
  width:50%
}

</style>
<style scoped>
  @import '../assets/css/userlogin.css';
</style>
